<template>
  <view class="merchant-join-container">
    <view class="header bg-white">
      <view class="container uni-py-7">
        <view
          class="d-flex justify-content-between align-items-center uni-px-5"
        >
          <view>
            <text
              class="section-title animate__animated animate__fadeInDown text-center uni-my-4"
            >
              <text class="title-icon">◈</text>
              入驻协议
            </text>
          </view>
        </view>
      </view>
    </view>

    <view class="content-container">
      <view class="steps-container bg-white uni-ma-3 uni-pa-4 rounded">
        <uni-steps :options="steps" :active="currentStep" />
      </view>

      <view class="form-container bg-white uni-ma-3 uni-pa-4 rounded">
        <!-- 步骤1：阅读协议 -->
        <view v-if="currentStep === 0">
          <view class="agreement-section">

            <view class="agreement-content uni-mb-3">
              <scroll-view scroll-y class="agreement-scroll">
                <image :src="url('mocontact', '', 'jpg')" mode="widthFix" class="contract-image"></image>
              </scroll-view>
            </view>
            <!-- #ifdef H5 -->
            <a
              :href="contractUrl"
              download="商家入驻合同.pdf"
              class="uni-btn uni-btn-primary uni-mb-3"
            >
              下载合同文件
            </a>
            <!-- #endif -->
            <!-- #ifndef H5 -->
            <button type="primary" @click="downloadContract" class="uni-mb-3">
              复制合同链接
            </button>
            <!-- #endif -->
            <view class="d-flex align-items-center uni-mb-3">
              <button type="primary" @click="agreeContract = true" class="flex-grow-1">
                我已阅读并下载合同
              </button>
            </view>
          </view>
        </view>
        <!-- 步骤2：填写基本信息 -->
        <view v-if="currentStep === 1">
          <uni-forms ref="baseForm" :model="formData.base">
            <uni-forms-item label="商家名称" required>
              <uni-easyinput
                v-model="formData.base.merchantName"
                placeholder="请输入商家名称"
              />
            </uni-forms-item>
            <uni-forms-item label="联系人" required>
              <uni-easyinput
                v-model="formData.base.contactPerson"
                placeholder="请输入联系人姓名"
              />
            </uni-forms-item>
            <uni-forms-item label="联系电话" required>
              <uni-easyinput
                v-model="formData.base.phone"
                placeholder="请输入联系电话"
              />
            </uni-forms-item>
            <uni-forms-item label="电子邮箱" required>
              <uni-easyinput
                v-model="formData.base.email"
                placeholder="请输入电子邮箱"
              />
            </uni-forms-item>
          </uni-forms>
        </view>

        <!-- 步骤3：上传资质 -->
        <view v-if="currentStep === 2">
          <uni-forms
            ref="qualificationForm"
            :modelValue="formData.qualification"
          >
            <uni-forms-item label="手持身份证人像" required>
              <uni-file-picker
                v-model="formData.qualification.businessLicense"
                file-mediatype="image"
                mode="grid"
                @select="selectFile"
                @progress="uploadProgress"
                @success="uploadSuccess"
                @fail="uploadFail"
              />
            </uni-forms-item>
            <uni-forms-item label="身份证正面" required>
              <uni-file-picker
                v-model="formData.qualification.idCardFront"
                file-mediatype="image"
                mode="grid"
              />
            </uni-forms-item>
            <uni-forms-item label="身份证反面" required>
              <uni-file-picker
                v-model="formData.qualification.idCardBack"
                file-mediatype="image"
                mode="grid"
              />
            </uni-forms-item>
            <uni-forms-item label="打印合同并签署拍照上传">
              <uni-file-picker
                v-model="formData.qualification.otherQualifications"
                file-mediatype="all"
                mode="grid"
                :limit="5"
              />
            </uni-forms-item>
          </uni-forms>
        </view>

        <!-- 步骤4：提交成功 -->
        <view v-if="currentStep === 3" class="success-container text-center">
          <text
            class="bi bi-check-circle-fill text-success"
            style="font-size: 80px"
          ></text>
          <view class="uni-mt-3">
            <text class="fs-4">提交成功</text>
          </view>
          <view class="uni-mt-2 text-muted">
            <text>我们会在3-5个工作日内完成审核</text>
          </view>
        </view>

        <!-- 底部按钮 -->
        <view class="button-group uni-mt-4 d-flex" v-if="currentStep !== 3">
          <button
            v-if="currentStep > 0"
            @click="prevStep"
            class="me-2 flex-grow-1"
          >
            上一步
          </button>
          <button
            type="primary"
            @click="nextStep"
            :disabled="!canProceed"
            class="flex-grow-1"
          >
            {{ currentStep === 2 ? "提交审核" : "下一步" }}
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, reactive } from "vue";
const url = $url;

// 步骤配置
const steps = [
  { title: "阅读协议" },
  { title: "基本信息" },
  { title: "资质上传" },
  { title: "提交成功" },
];

const currentStep = ref(0);
const agreeContract = ref(false);

// 表单数据
const formData = reactive({
  base: {
    merchantName: "",
    contactPerson: "",
    phone: "",
    email: "",
  },
  qualification: {
    businessLicense: [],
    idCardFront: [],
    idCardBack: [],
    otherQualifications: [],
  },
});

// 协议内容
const agreementText = `
1. 总则
1.1 本协议是商家与平台之间关于入驻平台开展经营活动的基本协议...

2. 入驻条件
2.1 商家应当具备合法的经营资质...

3. 商家权利和义务
3.1 商家有权在平台上发布商品信息...

4. 平台权利和义务
4.1 平台应当为商家提供必要的技术支持...

5. 保密义务
5.1 双方应当对合作过程中知悉的对方商业秘密严格保密...
`;

// 合同链接
const contractUrl =
  "https://mp-d7d620be-76ea-43bb-a05a-d38ceb13c655.cdn.bspapp.com/audio/resource/mo.pdf";

// 判断是否可以进行下一步
const canProceed = computed(() => {
  switch (currentStep.value) {
    case 0:
      return agreeContract.value;
    case 1:
      return (
        formData.base.merchantName &&
        formData.base.contactPerson &&
        formData.base.phone &&
        formData.base.email
      );
    case 2:
      return (
        formData.qualification.businessLicense.length > 0 &&
        formData.qualification.idCardFront.length > 0 &&
        formData.qualification.idCardBack.length > 0
      );
    default:
      return true;
  }
});

// 下载合同
const downloadContract = () => {
  // #ifdef H5
  window.open(contractUrl);
  // #endif

  // #ifndef H5
  uni.setClipboardData({
    data: contractUrl,
    success: function () {
      uni.showToast({
        title: "合同链接已复制",
        icon: "success",
      });
    },
  });
  // #endif
  
  // 自动勾选同意协议
  agreeContract.value = true;
};

// 上一步
const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--;
  }
};

// 下一步
const nextStep = async () => {
  if (currentStep.value === 2) {
    // 提交审核
    try {
      const db = uniCloud.database();
      await db.collection("merchant_applications").add({
        ...formData,
        status: "pending",
        createTime: Date.now(),
      });

      currentStep.value++;
      uni.showToast({
        title: "提交成功",
        icon: "success",
      });
    } catch (error) {
      uni.showToast({
        title: "提交失败",
        icon: "error",
      });
    }
  } else {
    currentStep.value++;
  }
};

// 文件上传相关方法
const selectFile = (e) => {
  console.log("选择文件：", e);
};

const uploadProgress = (e) => {
  console.log("上传进度：", e);
};

const uploadSuccess = (e) => {
  console.log("上传成功：", e);
};

const uploadFail = (e) => {
  console.log("上传失败：", e);
};
</script>

<style lang="scss" scoped>
.merchant-join-container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.content-container {
  padding-bottom: 100rpx;
}

.steps-container {
  margin-bottom: 20rpx;
}

.form-container {
  .title {
    font-size: 32rpx;
    font-weight: bold;
  }
}

.agreement-content {
  border: 1px solid #eee;
  padding: 20rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  line-height: 1.6;
}

.agreement-scroll {
  height: 60vh;
  width: 100%;
}

.contract-image {
  width: 100%;
  display: block;
}

.success-container {
  padding: 40rpx 0;
}

.button-group {
  margin-top: 40rpx;

  button {
    min-width: 200rpx;
  }
}
</style>
